<template>
  <a-modal :visible="visible" @cancel="cancelBtn" :title="'导入' + $L('房源')">
    <template #footer>
      <a-row type="flex" justify="space-between">
        <a-col>
          <a-button @click="downloadUrl"
            ><DownloadOutlined />模板下载</a-button
          ></a-col
        >
        <a-col>
          <a-button @click="cancelBtn">取消</a-button>
          <a-button type="primary" :loading="loading" @click="handleOk"
            >确认</a-button
          >
        </a-col>
      </a-row>
    </template>
    <!-- :action="$utils.localFileAction" -->
    <a-upload-dragger
      :fileList="fileList"
      :multiple="false"
      :before-upload="beforeUpload"
      accept=".xlsx"
      @remove="handleRemove"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
      <p class="ant-upload-hint">支持扩展名: .xlsx</p>
    </a-upload-dragger>
    <div class="switch-box">
      生成项目/楼宇
      <TextTip
        tips="如果勾选是，当表格中的项目/楼宇不存在时，则自动创建。项目详细信息请稍后自行前往完善"
      />
      <a-switch
        class="ml-10"
        v-model:checked="checked"
        :checkedValue="1"
        :unCheckedValue="0"
        checked-children="是"
        un-checked-children="否"
      />
    </div>
  </a-modal>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  ref,
  toRaw,
  watch,
  createVNode,
  h,
} from "vue";
import {
  InboxOutlined,
  DownloadOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import request from "../../../../common/utils/request";
import { Modal } from "ant-design-vue";
import { TextTip } from "bl-common-vue3";
export default defineComponent({
  name: "Import",
  components: { InboxOutlined, DownloadOutlined, TextTip },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const cancelBtn = () => {
      context.emit("clear");
    };
    const checked = ref(0);
    const loading = ref(false);
    const handleOk = () => {
      loading.value = true;
      const formData = new FormData();
      formData.append("file", fileList.value[0]);
      formData.append("auto_village", checked.value);
      request
        .post("/village", "/room/import/file", formData)
        .then((res) => {
          if (res.fileUrl) {
            loading.value = false;
            Modal.confirm({
              title: "导入错误",
              icon: createVNode(ExclamationCircleOutlined),
              content: () =>
                h("div", { style: "color:#666;" }, [
                  h("div", {}, `有误条数: ${res.errorRow} `),
                  h(
                    "div",
                    {},
                    " 请下载反馈文档，导入结果可以帮助您更快锁定问题"
                  ),
                ]),
              okText: "下载文档",
              cancelText: "返回",
              onOk() {
                // window.open(res.fileUrl);
                iframe.src = res.fileUrl;
                iframe.style.display = "none";
                document.body.appendChild(iframe);
                setTimeout(() => {
                  document.body.removeChild(iframe);
                }, 1000);
              },
            });
            return;
          }
          message.success("导入成功");
          loading.value = false;
          fileList.value = [];
          checked.value = 0;
          context.emit("refresh");
        })
        .catch(() => {
          loading.value = false;
        });
    };
    //下载模板
    const iframe = document.createElement("iframe");
    const downloadUrl = () => {
      request.get("/village", "/room/import/demofile").then((res) => {
        iframe.src = res.fileUrl;
        iframe.style.display = "none";
        document.body.appendChild(iframe);
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 1000);
      });
    };

    // 导入房源
    const fileList = ref([]);
    const beforeUpload = (file) => {
      fileList.value = [file];
      return false;
    };
    // 移除文件
    const handleRemove = (file) => {
      const index = fileList.value.indexOf(file);
      const newFileList = fileList.value.slice();
      newFileList.splice(index, 1);
      fileList.value = newFileList;
    };

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          fileList.value = [];
          checked.value = 0;
        }
      }
    );

    return {
      checked,
      loading,
      beforeUpload,
      handleRemove,
      handleOk,
      cancelBtn,
      fileList,
      downloadUrl,
    };
  },
});
</script>

<style lang="less" scoped>
.switch-box {
  margin-top: 12px;
  height: 30px;
  display: flex;
  align-items: center;
}
.ml-10 {
  margin-left: 10px;
}
</style>
